<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<div class="app">
  firstName: <input type="text" name="firstName" id="firstName"
                    placeholder="firstName" v-model="firstName"/> <br>
  lastName: <input type="text" name="lastName" id="lastName"
                   placeholder="lastName" v-model="lastName"/> <br>
  fullName: <input type="text" name="fullName" id="fullName"
                   placeholder="fullName" v-model="fullName"/>
  <br>
  <!-- 计算属性的缓存能力-->
  <!-- 状态驱动页面, 计算属性依赖的状态发生变化时, 重新渲染页面-->
  <button @click="count+=1">{{ count }}</button>
</div>
</body>
<script>
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '.app',
    data: {
      firstName: '',
      lastName: '',
      count: 0
    },
    methods: {},
    computed: {
      fullName() {
        console.log('@')
        return this.firstName + "-" + this.lastName
      }
    }
  })
</script>
</html>